<template>
  <el-dialog title="查看艺人信息" :visible.sync="visible" width="1100px" append-to-body :close-on-click-modal="false">
    <el-descriptions class="margin-top" title="个人信息 Personal Information" :column="3" :labelStyle="{ width: '120px' }"
      :contentStyle="{ minWidth: '222px' }" border>
      <el-descriptions-item>
        <template slot="label"> 姓名 </template>
        {{ name }}
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label"> 照片 </template>
        <div class="text-center">
          <img width="320" :src="avatar" />
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-for="(v, k) in artistInfo">
        <template slot="label">
          {{ infoKey[k] }}
        </template>
        {{ v }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" style="margin-top: 40px" title="相关信息 Other Information" :column="2"
      :labelStyle="{ width: '120px' }" :contentStyle="{ minWidth: '222px' }" border>
      <el-descriptions-item v-for="(v, k) in t1">
        <template slot="label">
          {{ k }}
        </template>
        {{ v }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label"> 标签 </template>
        <el-tag style="margin-right: 8px" v-for="tag in labNames"> {{ tag }} </el-tag>
      </el-descriptions-item>

      <el-descriptions-item :span="4" v-if="!isPlantform">
        <template slot="label"> 所参与项目 </template>
        <el-tag style="display: inline-block; margin-bottom: 4px; margin-right: 4px" v-for="(p, index) in projects"
          :key="index" type="success">
          {{ p.projectName }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" style="margin-top: 40px" title="维度评分" :column="4" border
      :labelStyle="{ width: '120px' }">
      <el-descriptions-item v-for="item in projectScore">
        <template slot="label"> {{ item.key }} </template>
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>

    <div style="height: 400px; width: 400px; padding: 16px">
      <RadarChart :legendData="legendData" :radarIndicator="radarIndicator" :seriesData="seriesData" />
    </div>
  </el-dialog>
</template>

<script>
import RadarChart from '@/views/system/candidate/components/RadarChart.vue'
import { transformData } from '../dataTransformer.js'
import auth from '@/plugins/auth'
import { getFile } from '@/utils/ali-oss'
export default {
  name: 'artistDetail',
  components: {
    RadarChart
  },
  data() {
    return {
      visible: false,
      name: '',
      avatar: '',
      labNames: [],
      legendData: [],
      radarIndicator: [],
      seriesData: [],
      projectScore: [],
      projects: [],
      isPlantform: false,
      artistInfo: {
        sex: '男',
        birthday: '1996.10.17',
        famous: '汉族',
        height: '178CM',
        weight: '80kg',
        school: '北京电影学院',
        major: '表演本科班',
        hometown: '湖南',
        dog: '是',
        nickName: '',
        work: '演员',
        phone: '',
        address: '北京',
        social: '微博：张星特闭麦吗小红书/抖音：张星特',
        agent: '有',
        MBTI: 'INFP 92%I'
      },
      infoKey: {
        sex: '性别',
        birthday: '出生年月',
        school: '学校',
        major: '专业',
        famous: '民族',
        height: '身高',
        weight: '体重',
        hometown: '籍贯',
        dog: '是否单身',
        nickName: '昵称/外号',
        work: '职业',
        phone: '联系方式',
        address: '现居地',
        social: '社交平台账号',
        agent: '有/无经纪公司',
        mbti: 'MBTI'
      },

      t1: {}
    }
  },
  methods: {
    async open(row) {
      this.visible = true
      const {
        name,
        avatar,
        sex,
        birthday,
        famous,
        height,
        weight,
        school,
        major,
        hometown,
        dog,
        nickName,
        work,
        address,
        social,
        agent,
        mbti,
        projectInfo,
        labNames,
        projectScore,
        projectInfoList,
        phone
      } = row
      this.name = name
      const imgurl = await getFile(avatar)
      this.avatar = imgurl || require('@/assets/images/profile.jpg');
      this.projects = projectInfoList || []
      this.artistInfo = {
        sex,
        birthday,
        famous,
        height,
        weight,
        school,
        major,
        hometown,
        dog,
        nickName,
        work,
        address,
        social,
        agent,
        mbti
      }

      if (!this.isPlantform) {
        this.artistInfo.phone = phone
      }
      this.t1 = {}
      const tempProjectInfo = JSON.parse(projectInfo)
      tempProjectInfo.forEach(item => {
        this.t1[item.key] = item.value
      })
      this.labNames = labNames || []
      const { legendData, radarIndicator, seriesData } = transformData([row])

      this.legendData = legendData || [];
      this.radarIndicator = radarIndicator
      this.seriesData = seriesData
      this.projectScore = JSON.parse(projectScore)
    },
    close() {
      this.visible = false
    }
  },
  created() {
    this.isPlantform = auth.hasRoleOr(['@platform'])
    console.log(this.isPlantform)
  }
}
</script>

<style scoped></style>
